<template>
  <div class="table_list">
    <van-sticky :offset-top="44">
      <ul class="filter_bar" v-if="filterBar">
        <li>
          <p class="toggle_btn" @click="toggle('organization')">
            <span>组织</span>
            <!-- <i class="triangle" v-show="organization">▲</i>
            <i class="triangle" v-show="!organization">▼</i>-->
            <van-icon class="triangle" name="arrow-up" v-show="organization" />
            <van-icon class="triangle" name="arrow-down" v-show="!organization" />
          </p>
          <van-popup v-model="organization" position="bottom">
            <van-area :area-list="areaList" @cancel="close('organization')" @confirm="onConfirm" />
          </van-popup>
        </li>
        <li>
          <p class="toggle_btn" @click="toggle('identity')">
            <span>店导身份</span>
            <van-icon class="triangle" name="arrow-up" v-show="identity" />
            <van-icon class="triangle" name="arrow-down" v-show="!identity" />
          </p>
          <van-popup v-model="identity" position="bottom">
            <van-picker
              show-toolbar
              :columns="identityColumns"
              @cancel="close('identity')"
              @confirm="onConfirm"
            />
          </van-popup>
        </li>
        <li>
          <p class="toggle_btn" @click="toggle('isMenber')">
            <span>是否转正</span>
            <van-icon class="triangle" name="arrow-up" v-show="isMenber" />
            <van-icon class="triangle" name="arrow-down" v-show="!isMenber" />
          </p>
          <van-popup v-model="isMenber" position="bottom">
            <van-picker
              show-toolbar
              :columns="isMenberColumns"
              @cancel="close('isMenber')"
              @confirm="onConfirm"
            />
          </van-popup>
        </li>
      </ul>
    </van-sticky>
    <div class="sort_bar">
        <van-sticky :offset-top="88">
        <ul class="sort_bar_list">
          <li class="sort_bar_item"></li>
          <li class="sort_bar_item">
            <div class="sort_bar_btn">
              <div>
                <span>在职</span>
                <br />
                <span>天数</span>
              </div>
            </div>
          </li>
          <li class="sort_bar_item" :class="{active:order==='fd_sta_merchants'}" @click="sortDatas('fd_sta_merchants')" >
            <div class="sort_bar_btn">
              <div>
                <span>历史</span>
                <br />
                <span>招单</span>
              </div>
              <p>
                <span :class="{active:order==='fd_sta_merchants' && fd_sta_merchants}">▲</span>
                <br />
                <span :class="{active:order==='fd_sta_merchants' && !fd_sta_merchants}">▼</span>
              </p>
            </div>
          </li>
          <li class="sort_bar_item" :class="{active:order==='fd_recent_score'}" @click="sortDatas('fd_recent_score')" >
            <div class="sort_bar_btn">
              <div>
                <span>最近</span>
                <br />
                <span>得分</span>
              </div>
              <p>
                <span :class="{active:order==='fd_recent_score' && fd_recent_score}">▲</span>
                <br />
                <span :class="{active:order==='fd_recent_score' && !fd_recent_score}">▼</span>
              </p>
            </div>
          </li>
          <li class="sort_bar_item" :class="{active:order==='fd_ongoing_score'}" @click="sortDatas('fd_ongoing_score')" >
            <div class="sort_bar_btn">
              <div>
                <span>当前</span>
                <br />
                <span>考核</span>
              </div>
              <p>
                <span :class="{active:order==='fd_ongoing_score' && fd_ongoing_score}">▲</span>
                <br />
                <span :class="{active:order==='fd_ongoing_score' && !fd_ongoing_score}">▼</span>
              </p>
            </div>
          </li>
        </ul>
        </van-sticky>
      </div>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <li
        class="van_item"
        v-for="(item,index) in tableList"
        :key="index"
        @click="subordinatesInfo(item.fd_sta_id)"
      >
        <ul class="item_list">
          <li class="item_list_item first_item_list_item">
            <div class="item_user_info">
              <img v-if="item.fd_sta_photo" :src="item.fd_sta_photo" alt="头像" />
              <img v-else :src="pic" alt="头像" />
              <div>
                <span>{{item.fd_sta_name}}</span>
                <br />
                <span>{{item.fd_jobs_name}}</span>
              </div>
            </div>
          </li>
          <li class="item_list_item one-txt-cut">{{item.fd_sta_stay_days}}</li>
          <li class="item_list_item one-txt-cut">{{item.fd_sta_merchants}}</li>
          <li class="item_list_item one-txt-cut">{{item.fd_recent_score}}</li>
          <li class="item_list_item one-txt-cut">{{item.fd_ongoing_score}}</li>
        </ul>
      </li>
    </van-list>
  </div>
</template>
<script>
import locationData from "../data/locationData.js";
import { subordinateStaffers } from "@/request/api.js";
export default {
  data() {
    return {
      tableList:[],
      areaList: locationData,
      organization: false,
      identity: false,
      isMenber: false,
      identityColumns: ["全部", "招商专员", "市总", "招商经理"],
      isMenberColumns: ["全部", "试用", "转正"],
      loading: false,
      finished: false,
      searchValue:'',
      order: 'fd_ongoing_score',
      order_type:'desc',
      fd_ongoing_score:false,
      fd_sta_merchants:false,
      fd_recent_score:false,
      pic:require('@/assets/images/morentouxiang.png'),
      page:1,
      limit:10
    };
  },
  props:{
    offsetTop:{
      type:Number,
      default:88
    },
    filterBar:{
      type:Boolean,
      default:true
    }
  },
  mounted() {
    // this.tableList = JSON.parse(localStorage.getItem('tableList'))
    console.log(this.tableList);
    console.log(this.$router.history.current.name)
  },
  methods: {
    //关闭底部弹框
    close(type) {
      if (type === "organization") {
        this.organization = false;
      } else if (type === "identity") {
        this.identity = false;
      } else if (type === "isMenber") {
        this.isMenber = false;
      }
    },
    //显示底部弹框
    toggle(type) {
      if (type === "organization") {
        this.organization = !this.organization;
      } else if (type === "identity") {
        this.identity = !this.identity;
      } else if (type === "isMenber") {
        this.isMenber = !this.isMenber;
      }
    },
    //确认提交弹框内容
    onConfirm(value) {
      console.log(value);
      this.organization = false;
      this.identity = false;
      this.isMenber = false;
    },
    //搜索
    onSearch(){
      console.log(this.searchValue)
    },
    //列表排序
    sortDatas(type) {
      this.order = type;
      if (type === "fd_sta_merchants") {
        this.fd_sta_merchants = !this.fd_sta_merchants;
        if (this.fd_sta_merchants) {
          this.order_type = 'asc'; //升序
        } else {
          this.order_type = 'desc'; //降序
        }
      } else if (type === "fd_recent_score") {
        this.fd_recent_score = !this.fd_recent_score;
        if (this.fd_recent_score) {
          this.order_type = 'asc'; //升序
        } else {
          this.order_type = 'desc'; //降序
        }
      } else if (type === "fd_ongoing_score") {
        this.fd_ongoing_score = !this.fd_ongoing_score;
        if (this.fd_ongoing_score) {
          this.order_type = 'asc'; //升序
        } else {
          this.order_type = 'desc'; //降序
        }
      };
      this.getData(subordinateStaffers, {
        page: 1,
        page_num: this.limit,
        fd_sta_name: this.searchValue,
        order:this.order,
        order_type:this.order_type,
        organize_id:''
      }).then(res=>{
        let list = res.data;
        this.isLoading = false;
        this.page = 2;
        this.tableList = list.staffers;
      }).catch(error=>{
        console.log(error)
      });
    },
    //进入个人绩效结果页面
    subordinatesInfo(id) {
      if (!this.$router.history.current.name=='performanceTabs') {
        this.$router.push({ name: "subordinatesInfo", params: {id:id} });
      } else {
        this.$router.push({ name: "myPerformance", params: {id:id} });
      }
    },
    onLoad() {
      this.page+=1;
      this.getData(subordinateStaffers,{current_page: this.page,per_page: this.limit}).then(res=>{
        console.log(res.data);
         console.log(res)
        let data = res.data;
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        console.log('onLoad')
        if (data.staffers.length <= 10) {
            this.finished = true;
        }
        this.page += 1;
        this.tableList.push(...data.staffers);
      }).catch(err=>{
        console.log(err)
      })
    },
  }
};
</script>
<style lang="less" scoped>
.table_list {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  background: #fff;
  .filter_bar {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    background: #fff0c9;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    border-bottom: 2px solid #f7f7f7;
    li {
      flex: 1;
      line-height: 44px;
      text-align: center;
      color: #161719;
      .toggle_btn {
        display: flex;
        align-items: center;
        justify-content: center;
        .triangle {
          color: #666;
          font-size: 15px;
          font-weight: bolder;
        }
      }
    }
  }
.sort_bar {
    width: 100%;
    height: 44px;
    line-height: 44px;
    background: #fff;
    border-bottom: 2px solid #f7f7f7;
    .sort_bar_list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      height: 44px;
      line-height: 44px;
      color: #161618;
      background: #fff;
      .sort_bar_item {
        width: 100%;
        height: auto;
        flex: 1;
        .sort_bar_btn {
          display: flex;
          align-items: center;
          justify-content: center;
          div,
          p {
            max-width: 85px;
            line-height: 15px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          p {
            margin-left: 5px;
            span {
              color: #636466;
            }
            .active {
              color: #ff661a;
            }
          }
        }
      }
      .active {
        color: #ff661a;
      }
      .sort_bar_item:first-child {
        flex: 2;
        text-align: left;
      }
    }
  }
  .van_item {
    width: 100%;
    height: 68px;
    line-height: 68px;
    border-bottom: 2px solid #f7f7f7;
    .item_list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      padding: 0 10px;
      box-sizing: border-box;
      .item_list_item {
        width: 100%;
        height: auto;
        flex: 1;
        .item_user_info {
          display: flex;
          align-items: center;
          div {
            max-width: 85px;
            line-height: 20px;
            margin-left: 5px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          img {
            width: 28px;
            height: 28px;
            border-radius: 28px;
          }
        }
      }
      .first_item_list_item {
        flex: 2;
        text-align: left;
      }
    }
  }
}
/deep/.van-picker__cancel, /deep/.van-picker__confirm{
  font-size: 14px;
  color: #02ccbd;
}
/deep/.van-picker__cancel{color: #999;}
/deep/.van-picker-column{font-size: 13px;color: #232426;}
</style>